<template>
    <div class="contentBox3">
        <!-- <p class="contentBox3_p1 contentBox3_p1_active">智慧医院解决方案</p>
        <p class="contentBox3_p2">智慧医院&emsp;高效办公</p>
        <div class="box3_tip flex">
            <div class="flex">
                <img src="../../assets/ChargeTaskLabel_icon1.png">
                <p>随即部署，安全可靠</p>
            </div>
            <div class="flex">
                <img src="../../assets/ChargeTaskLabel_icon1.png">
                <p>随即部署，安全可靠</p>
            </div>
        </div> -->

        <transition name="scale-slide">
            <p v-if="showBox1" class="contentBox3_p1 contentBox3_p1_active">疫情采集方案</p>
        </transition>
        <transition name="scale-slide1">
            <p v-if="showBox2" class="contentBox3_p2">精准采集 &emsp;及时上报</p>
        </transition>
        <transition name="scale-slide2">
            <div v-if="showBox3" class="box3_tip flex">
                <div class="flex">
                    <img src="../../assets/ChargeTaskLabel_icon1.png">
                    <p>全科室疫情数据快速采集                    </p>
                </div>
                <div class="flex">
                    <img src="../../assets/ChargeTaskLabel_icon1.png">
                    <p>实时统计每日疫情情况                    </p>
                </div>
            </div>
        </transition>


    </div>
</template>

<script>



export default {
    data() {
        return {
            showBox1: false,
            showBox2: false,
            showBox3: false,
        }
    },
    mounted() { 
        this.animateBoxes();
    },
    methods: { 
        async animateBoxes() {
            // 控制每个 box 的动画延迟
            await this.showBoxWithDelay("showBox1",300); // 立即显示
            await this.showBoxWithDelay("showBox2", 700); // 延迟 1 秒
            await this.showBoxWithDelay("showBox3", 1000); // 延迟 1 秒
        },
        showBoxWithDelay(box, delay) {
            return new Promise((resolve) => {
                setTimeout(() => {
                    this[box] = true;
                    resolve();
                }, delay);
            });
        },
    },
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.flex {
    display: flex;
    align-items: center;
}

.contentBox3 {
    position: relative;
}

.contentBox3_p1 {
    color: #000;
    font-size: max(16px, min(2vw, 25px));
    white-space: nowrap;
    width: 100%;
}


.contentBox3_p2 {
    color: #1E4BFF;
    font-size: 38px;
    font-size: max(25px, min(3vw, 38px));
    font-weight: bold;
    margin: 10px 0 20px 0;
    white-space: nowrap;
    width: 100%;
}

.box3_tip {
    color: #151515;
    font-size: 13px;
    white-space: nowrap;
}

.box3_tip img {
    width: 20px;
    height: 15px;
    margin-right: 10px;
}

.box3_tip div {
    margin-right: 2.6vw;
}
 
.scale-slide-enter-active,
.scale-slide-leave-active,
.scale-slide1-enter-active,
.scale-slide1-leave-active,
.scale-slide2-enter-active,
.scale-slide2-leave-active {
    position: absolute;
    transition: all 0.85s ease-in-out;
}

.scale-slide2-enter-active,
.scale-slide2-leave-active {
    position: absolute;
    transition: all 0.55s ease;
}

.scale-slide-enter-from {
    top: -100%;
}

.scale-slide-enter-to {
    top: 0%;
}
 
.scale-slide1-enter-from {
    right: -100%;
}

.scale-slide1-enter-to {
    right: 0%;
}
 
.scale-slide2-enter-from {
    top: -100%;
}

.scale-slide2-enter-to {
    top: 0%;
}
  
</style>